<template>
  <rj-modal
    :title="$t('groupOperate.title')"
    :visible="true"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model
      :model="form"
      layout="horizontal"
      :labelCol="{ span: 5 }"
      :wrapperCol="{ span: 18 }"
    >
      <a-form-model-item :label="$t('groupOperate.name')" prop="user">
        <a-select
          :value="form.userId"
          :placeholder="$t('groupOperate.tipname')"
          show-search
          :filterOption="filterOption"
          @change="handleUserChange"
        >
          <a-select-option
            :value="item.id"
            :key="item.id"
            v-for="item in subAccountList"
          >
            {{ item.account }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label="$t('groupOperate.ex')">
        <a-radio-group v-model="form.authType" style="margin-top: 6px">
          <a-radio class="authItem" :value="3" name="userAuthority">{{
            $t('groupOperate.exread')
          }}</a-radio>
          <p class="itemDesc">
            {{ $t('groupOperate.exreaddetail') }}
          </p>
          <a-radio class="authItem" :value="1" name="userAuthority">{{
            $t('groupOperate.exwrite')
          }}</a-radio>
          <p class="itemDesc">
            {{ $t('groupOperate.exwritedetail') }}
          </p>
        </a-radio-group>
      </a-form-model-item>
    </a-form-model>
  </rj-modal>
</template>

<script>
import { RjModal } from '@components';
import { maccApi, requestHttp } from '@utils/index';
export default {
  name: 'AddManageUser',
  props: {
    groupId: {
      type: Number,
      require: true,
    },
    alreadyUserList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  data() {
    return {
      alreadyUserId: [],
      subAccountList: [],
      form: {
        userId: undefined,
        authType: 3,
      },
    };
  },
  mounted() {
    this.getSubUserList();
  },
  components: {
    'rj-modal': RjModal,
  },
  watch: {
    alreadyUserList: {
      handler: function (valArr) {
        let arr = [];
        valArr.forEach((item) => {
          arr.push(item.userId);
        });
        this.alreadyUserId = arr;
      },
      immediate: true,
    },
  },
  methods: {
    async handleOk() {
      const { code, msg } = await requestHttp({
        api: `${maccApi.ADD_GROUP_USER_API}`,
        method: 'POST',
        params: {
          groupId: this.groupId,
          operation: this.form.authType,
          userId: this.form.userId,
        },
      });
      if (code == 0) {
        this.$emit('closeCallback');
      } else {
        this.$message.error(msg || this.$t('groupOperate.addadminfail'));
      }
    },
    handleCancel() {
      this.$emit('closeCallback');
    },

    filterOption(value, option) {
      return option.componentOptions.children[0].text.indexOf(value) >= 0;
    },

    //获取子账号列表
    async getSubUserList() {
      const { code, msg, accountList = [] } = await requestHttp({
        api: `${maccApi.GET_SUB_USER_LIST_API}?page_index=1&page_size=999`,
        method: 'GET',
      });
      if (code == 0) {
        // this.subAccountList = accountList;
        this.subAccountList = accountList.filter((item) => {
          console.log(this.alreadyUserId);
          return this.alreadyUserId.indexOf(item.id) == -1;
        });
      } else {
        this.$message.error(msg || this.$t('groupOperate.getchildrenlist'));
      }
    },
    handleUserChange(value) {
      this.form.userId = value;
    },
  },
};
</script>

<style lang="less" scoped>
.itemDesc {
  color: #ccc;
  margin: 5px 0 5px 0;
}
</style>
